import React from 'react';

export default function Func(props){
    //1. state 的使用
    // count 用来保存状态的值
    // setCount 用来修改状态的值
    //     0  为状态的初始值
    // 解构赋值
    const [count, setCount] = React.useState(10);
    //2. props
    // console.log(props);
    //3. ref  创建容器
    const sp = React.useRef();
    //4. 生命周期钩子
    React.useEffect(() => {
        //是 componentDidMount 和 componentDidUpdate 的合体
        console.log('我回来啦!!');
        //返回函数
        return () => {
            //相当于 componentWillUnmount
            console.log('我被销毁了');
        }
    }, []);// 添加第二个参数『[]』, 将回调函数当做 componentDidMount 使用
    // 数组 设置『哪些状态』修改之后, 会执行该回调

    //处理单击事件
    const handleClick = () => {
        //修改状态
        setCount(count + 1);
        //修改 span 元素的文本
        sp.current.innerHTML = Math.random();
    }

    return <div style={{padding: '50px'}}>
        <h1>函数式组件</h1>

        <h2>{count}</h2>
        <button onClick={handleClick}>点击自增</button>
        <span ref={sp}></span>
    </div>
}